<template>
  <div class="today-container">
    <div class="today">
        <h2>今日任务完成 ！</h2>
        <div class="muubiao">
          <div class="jindu">
            <span>
              <!-- 进度条 -->
              <van-circle
              v-model="currentRate"
              :rate="80" :stroke-width="150"
              :speed="100"
              size="80px"
              :text="text"
              color="#fff"
              layer-color="rgb(153, 231, 243)" />
            </span>
          </div>
          <div class="wanmei">
            <h3>完美 !</h3>
            <span>你完成了总目标的一大半 !</span>
          </div>
        </div>
        <div class="sport">
          <div>
            <span><i class="iconfont icon-jianshen" style="color:blue"></i></span>
            <p>Fitness Time</p>
            <h3>95Min</h3>
          </div>
          <div>
            <span><i class="iconfont icon-qialuli" style="color:red"></i></span>
            <p>Calories</p>
            <h3>478Kal</h3>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 当前进度
      currentRate: 80,
      // 进度的文字
      text: '80%'
    }
  }
}
</script>

<style lang='less' scoped>
  .today-container {
    margin-top: 2.2222rem;
    margin-bottom: 2.2222rem;
    .muubiao {
      width: 100%;
      height: 8.3333rem;
      border-radius: .5556rem;
      background-image: linear-gradient(to bottom right, rgb(72, 236, 241), rgb(167, 200, 251),rgb(241, 195, 215));
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: .8333rem;
      .jindu {
        // span {
        //   display: block;
        //   width: 4.4444rem;
        //   height: 4.4444rem;
        //   border-radius: 50%;
        //   background-color: #fff;
        //   position: relative;
        //   i {
        //     display: block;
        //     width: 3.3333rem;
        //     height: 3.3333rem;
        //     border-radius: 50%;
        //     font-style: normal;
        //     text-align: center;
        //     line-height: 3.3333rem;
        //     color: #fff;
        //     position: absolute;
        //     top: 50%;
        //     left: 50%;
        //     transform: translate(-50%,-50%);
        //     background-image: linear-gradient(to bottom right, rgb(72, 236, 241), rgb(167, 200, 251),rgb(241, 195, 215));
        //   }
        // }
      }
      .wanmei{
        color: #fff;
        h3 {
          margin-bottom: .2778rem;
        }
        span {
          font-size: .8889rem;
        }
      }
    }
    .sport {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: .5556rem;
      div {
        width: 40%;
        height: 7.7778rem;
        border-radius: .5556rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        &:nth-child(1){
          background-color: rgb(237, 243, 255);
        }
        &:nth-child(2) {
          background-color: rgb(255, 241, 242);
        }
        span {
          display: block;
          width: 2.2222rem;
          height: 2.2222rem;
          background-color: #fff;
          border-radius: .5556rem;
          text-align: center;
          line-height: 2.2222rem;
        }
        p {
          font-size: .7778rem;
          color: rgb(135, 141, 155);
          margin: .5556rem 0;
        }
      }
    }
  }
</style>
